import React from 'react';
import { renderRoutes } from 'react-router-config';
import './home.css'
import 'antd/dist/antd.css';
import Headers from '../components/Header/Header';
import Footers from '../components/Footer/Footer';
import { Layout } from 'antd';
import Map from '../components/Maps/Map';
import style from './home.css'

const Home = (props) => { 
     const route = props.route;
     const  mapSwitch  = true;
     return (
        <>
            <div className={style.content}>
                <div style={{width:'1919px',height:'936px',position:'absolute',top:'0px',zIndex:999, backgroundColor:'#004172',opacity:.8}}>
                    {
                        <div>
                            <Map type='area' />
                        </div>
                    }
                </div>                
                <div style={{width:'1919px',height:'936px',zIndex:1000,overflow:'hidden'}}>              
                    <div style={{textAlign:'center',width:'1919px',height:'91px',backgroundColor:'transparent',zIndex:1000,position:'absolute',top:'0px',left:'0px',}}>
                        <Headers ></Headers>
                    </div>            
                    <div style={{width:'1900px',height:'0',backgroundColor:'transparent',zIndex:1000,position: 'relative',top: '100px'}}>            
                        {route && renderRoutes(route.routes)}
                    </div>
                    <div style={{textAlign:'center',width:'1919px',height:'60px',backgroundColor:'transparent',zIndex:1000,position:'absolute',bottom:'0px',left:'0px',}}>
                        <Footers history={props}></Footers>
                    </div>
                </div>
            </div>


        </>
     )
}

export default Home;